<template>
	<div>
		<div class="search">
			<input type="text" v-model="keyword" class="search-input" placeholder="输入城市名或者拼音" />
		</div>
		<div 
		class="search-content"
		 ref = "search"
		 v-show="keyword"
		 >
			<ul>
				<li class="search-item border-bottom"
				 v-for = "item of list" 
				 :key = "item.id"
				 @click="handleCityClick(item.name)"
				 >{{item.name}}</li>
				 <li class="search-item border-bottom" v-if="hasList">
					 没有找到数据
				 </li>
			</ul>
		</div>
	</div>	
</template>
<script>
	import Bscroll from "better-scroll"
	export default {
		name: "CitySearch",
		props:{
			cities:Object
		},
		data:function(){
			return {
				keyword:'',
				list:[],	
				timer:null
			}
		},
		mounted:function(){
			this.scroll = new Bscroll(this.$refs.search)
		},
		computed:{
			hasList:function(){
				return !this.list.length
			}
		},
		methods:{
			handleCityClick:function(city){
				this.$store.dispatch("changeCity",city)
				this.$router.push("/")
			}
		},
		watch:{
			keyword:function(){
				var result = []
				if(this.timer){
					clearTimeout(this.timer)
				}
				if(!this.keyword){
					this.list = []
					return
				}
				this.timer = setTimeout(function(){//监听keyword的变化然后循环父组件传来的数据
					for(var i in this.cities){
						this.cities[i].forEach(function(value){//拿出其中有关键字的对象赋值给list
							if(value.spell.indexOf(this.keyword) >-1||value.name.indexOf(this.keyword)>-1){
								result.push(value)
							}
						}.bind(this))
					}
					this.list = result
				}.bind(this),100)
				
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.search{
		height: .72rem;
		background: $bgColor;
		padding: 0 .1rem;
	}
	.search-input {
		height: .62rem;
		line-height: .62rem;
		width: 100%;
		text-align: center;
		border-radius: .06rem;
		color: #666;
		padding: 0 .1rem;
		box-sizing: border-box;
	}
	.search-content {
		z-index: 1;
		position: absolute;
		overflow: hidden;
		left: 0;
		top: 1.58rem;
		right: 0;
		bottom: 0;
		background: #eee;;
		
	}
	.search-item {
		line-height: .62rem;
		padding-left: .2rem;
		color: #666;
		background: #fff;
	}
</style>